<script setup>
import { getStorage } from '../../utils/utils'
const { port, token } = getStorage(['port', 'token'])
</script>

<template>
  <div class="client-container">
    <div>
      <v-alert
        height="24"
        style="background-color: white"
        border="start"
        border-color="deep-purple accent-4"
        elevation="4"
      >
        <div class="flex-start">
          <div class="client-label label-port">PORT</div>
          <div class="client-content" :title="token">
            {{ port }}
          </div>
        </div>
      </v-alert>
      <v-alert
        class="alert"
        height="24"
        border="start"
        border-color="deep-purple accent-4"
        elevation="4"
        style="background-color: white"
      >
        <div class="flex-start">
          <div class="client-label">TOKEN</div>
          <div class="client-content" :title="token">
            {{ token }}
          </div>
        </div>
      </v-alert>
    </div>
  </div>
</template>
<style scoped>
.client-container {
  background: white;
  font-size: 14px;
  font-weight: 700;
  .alert {
    margin-top: 10px;
  }
  .client-label {
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
  }
  .label-port {
    margin-right: 19px;
  }
  .client-content {
    font-size: 12px;
    color: gray;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
</style>
